
<template>
  <div class="music-progress">
      <span class="time-text now-time ">{{currentTime | timeText}}</span>
      <v-slider
        dense
        v-model="currentTime"
        :color="color"
        :track-color="'rgba(255,255,255,.8)'"
        @end="triggerEndEvent"
        @start="emitStart"
        :max="totalTime"
      ></v-slider>
      <span class="time-text total-time">{{totalTime | timeText}}</span>
  </div>
</template>

<script>
export default {
    name: 'MusicProgress',
    props: {
        audio: {
            type: HTMLAudioElement
        },
        playid: {
            type: [Number, String]
        },
        color: {
            type: String,
            default: 'orange darken-2'
        }
    },

    data(){
        return {
            currentTime: 0,
            oldSrc: this.audio.src,
            totalTime: this.audio.duration
        }
    },

    filters: {
        timeText: function (value) {
            value = Number(value);

            if(isNaN(value))
                return '00:00';
            let m = Math.floor(value/60);
            let s = parseInt(value - m*60);
            m = m >= 10 ? m : '0' + m;
            s = s >= 10 ? s : '0'+s;

            return m + ':' + s;
        }
    },

    watch: {
        'audio.src':{
            handler(n){
                console.log('watch src')
                // if(Object.prototype.toString.call(this.audio).slice(8, -1) === 'HTMLAudioElement'){

                //     this.watchProgress();
                // }
            },
            deep: true
        },

        playid(n){
            console.log('watch playid');
            
        },

        currentTime(n, o){
        
            this.$emit('change', n);
        }
    },

    methods: {
        triggerEndEvent(index){
            console.log(index);
            if(isNaN(index)) index = 0;
            this.audio.currentTime = index;
            this.$emit('end', index);
        },

        emitStart(n){
            this.$emit('start', n);
        },

        watchProgress(){
            let _this = this;
            this.audio.ontimeupdate = function(evt){
                _this.currentTime = this.currentTime;
            };

            this.audio.onended = function(evt){
                _this.$emit('ended', evt);
            };

            // 更新进度条 （进度条更新后， 才会将最新的状态返回 ，于是歌词面板才能获取最新的状态， 并调整歌词的位置）
            this.audio.ondurationchange= ()=>{
                this.totalTime = this.audio.duration;
            }
        }
    },

    mounted(){
        if(this.audio){
            this.watchProgress();
        }
    }
}
</script>

<style lang="scss" scoped>
    @import '@/assets/styles/global.scss';

    .music-progress {
        display: flex;
        align-items: center;
        height: px2rem(32);
        color: #fff;
        .time-text {
            display: block;
            width: px2rem(60);
            height: 100%;
            @include defaultFontSize;
            position: relative;
            text-align: center;
        }
    }
</style>